<template>
    <div>
         <!-- 面包屑导航区域 -->
        <div class="bread_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统设置</el-breadcrumb-item>
                <el-breadcrumb-item>风格设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

         <!-- 卡片视图区域 -->
         <el-card>
             <div class="title_box">风格设置：待开发。。。</div>

             <div class="row_box">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div>
                            <!-- <span>颜色：</span> -->
                            <el-color-picker v-model="colorValue"></el-color-picker>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div>
                            <el-switch
                                v-model="switchValue"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <el-slider
                            v-model="sliderValue"
                            show-input>
                            </el-slider>
                        </div>
                    </el-col>
                </el-row>
             </div>

         </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      colorValue: '#409EFF',
      sliderValue: '',
      switchValue: true
    }
  }
}
</script>

<style lang="less" scoped>
.title_box{
}
.row_box{
    margin-top: 20px;
}

</style>
